<template>
	<view>
		<view class="search">
			<u-search placeholder="请输入内容" v-model="keyword" border-color="#FF8B00"></u-search>
		</view>
		<view class="list_box">
			<view class="item_box" v-for="(item,index) in dataList" :key="index" @click="handleGoRouter">
				<view class="top">
					<u-image width="100%" height="224rpx" :src="item.img" :lazy-load="true" :fade="true" duration="450">
						<view slot="error" style="font-size: 24rpx;">加载失败</view>
					</u-image>
				</view>
				<view class="content">{{item.title}}</view>
				<view class="foot">
					<view>{{item.num}}次播放</view>
					<view>{{item.time}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				dataList: [{
					img: '',
					title: '课程第一节',
					num: '35',
					time: '2024/12/25'
				}, {
					img: '',
					title: '课程第一节',
					num: '35',
					time: '2024/12/25'
				}, {
					img: '',
					title: '课程第一节',
					num: '35',
					time: '2024/12/25'
				}, {
					img: '',
					title: '课程第一节',
					num: '35',
					time: '2024/12/25'
				}, {
					img: '',
					title: '课程第一节',
					num: '35',
					time: '2024/12/25'
				}]
			}
		},
		methods: {
			handleGoRouter() {
				this.$u.route({
					url: '/pages_teach_db/courses-detail/courses-detail'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search {
		background-color: #fff;
		padding: 40rpx 20rpx;
	}

	.list_box {
		display: flex;
		flex-wrap: wrap;
		margin: 40rpx;

		.item_box {
			flex: 1;
			max-width: 48%;
			min-width: 45%;
			margin: 20rpx 11rpx;
			background-color: #fff;
			margin-top: 20rpx;
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.04);
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			.content {
				color: #1A1A1A;
				font-size: 28rpx;
				line-height: 32.81rpx;
				padding: 20rpx;
			}

			.foot {
				display: flex;
				justify-content: space-between;
				color: #999999;
				font-size: 24rpx;
				line-height: 28.13rpx;
				padding: 20rpx;
				padding-top: 0rpx;
			}
		}
	}
</style>